<!DOCTYPE html>
<html lang="en">
<head>
    <title>Select Features by Hover</title>
    <style>
        .map {
            width: 100%;
            height:100%;
        }
    </style>
    <link href="css/ol.css" type="text/css">
    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="js/ol.js" type="text/javascript"></script>

</head>
<body>
<div id="map" class="map"></div>
<span id="status"></span>
<script type="application/javascript">

    //底图，切片图层  Tile
    var raster = new ol.layer.Tile({
        source: new ol.source.OSM(),
    });

    //加载的geojson数据，为矢量图层
    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'china.json',
            format: new ol.format.GeoJSON(),
        }),
    });

    var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2,
        }),
    });

    var highlightStyle = new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255,255,255,0.7)',
        }),
        stroke: new ol.style.Stroke({
            color: '#3399CC',
            width: 3,
        }),
    });

    var selected = null;
    var status = document.getElementById('status');

    map.on('pointermove', function (e) {
        if (selected !== null) {
            selected.setStyle(undefined);
            selected = null;
        }

        map.forEachFeatureAtPixel(e.pixel, function (f) {
            selected = f;
            f.setStyle(highlightStyle);
            return true;
        });

        if (selected) {
            status.innerHTML = '&nbsp;Hovering: ' + selected.get('name');
        } else {
            status.innerHTML = '&nbsp;';
        }
    });
</script>
</body>
</html>